<!--  -->
<template>
  <div class="textarea">
      <textarea :disabled="isDisabled" type="text" ref="textarea" @keyup="setHeight()" :placeholder='placeholder'  class="contentInput" v-model="content" :style="{height:textareaHeight+'px'}"></textarea>
  </div>
</template>

<script>
export default {
    props:{
        placeholder:{
            type:String,
            default:''
        },
        remark:{
            type :String,
            default:''
        },
        // 是否禁用文本域
        isDisabled: {
            type :Boolean,
            default: false
        }
    },
  data () {
    return {
        content:'',
        height:'',
        textareaHeight:null
    };
  },

  components: {},

  methods: {
      setHeight(){
          var scrollHeight = this.$refs.textarea.scrollHeight;
          if(scrollHeight>this.height){
              this.textareaHeight = scrollHeight;
          }
          if(this.content == ''){
              this.textareaHeight = 120;
          }
          console.log(this.content);
         
          this.$emit('fromTextarea',this.content);
      }
  },

  computed: {

  },
  watch:{
      remark(now,old){
          this.content = now
      }
  },
  mounted(){
      this.height = this.$refs.textarea.offsetHeight; 
      this.content =this.remark;
      
  },

}

</script>
<style lang='less'>
.textarea{
    
    .contentInput{
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
        font-size: 14px;
        overflow: hidden;
        padding: 0px 8px;
        margin-bottom: 10px;
        border:  1px solid #f1f1f1;
        min-height: 120px;
         outline: none;
        resize: none;
        &:focus{
            box-shadow: 0 0 0 2px rgba(43, 214, 189, 0.2);
           
        }
        &:hover{
            border-color: #2bd6bd;
        }
    }
   
}
</style>